<template>
  <div>
    <!--使用draggable组件-->
    <div class="itxst">
      <div class="col">
        <draggable
          v-model="arr1"
          @end="end1"
          :options="{ group: { name: 'itxst', pull: 'clone', put: false }, sort: true }"
          animation="300"
          :move="onMove"
          :sort="false"
        >
          <transition-group>
            <div :class="item.id == 1 ? 'item forbid' : 'item'" v-for="item in arr1" :key="item.id">{{ item.name }}</div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <draggable v-model="arr2" @end="end2" :options="{ group: { name: 'itxst', pull: false, put: true }, sort: true }" animation="300" :move="onMove">
          <transition-group>
            <div
              :class="item.id == 12 ? 'item2 forbid' : 'item2'"
              v-for="item in arr2"
              :key="item.id"
              :style="{
                top: top+'px',
                left: left+'px'
              }"
            >{{ item.name }}</div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable,
  },
  data() {
    return {
      //定义要被拖拽对象的数组
      arr1: [
        { id: 1, name: 'www.itxst.com（不允许停靠）' },
        { id: 2, name: 'www.jd.com' },
        { id: 3, name: 'www.baidu.com' },
        { id: 5, name: 'www.google.com' },
        { id: 4, name: 'www.taobao.com（不允许拖拽）' }
      ],
      arr2: [
        { id: 11, name: '常用菜单' },
      ],
      moveId: -1,
      top: 0,
      left: 0
    };
  },
  methods: {
    //左边往右边拖动时的事件
    end1(e) {
      var that = this;
      var items = this.arr2.filter(function (m) {
        return m.id == that.moveId
      })
      //如果左边
      if (items.length < 2) return;
      this.arr2.splice(e.newDraggableIndex, 1)
    },
    //右边往左边拖动时的事件
    end2(e) {
      var that = this;
      var items = this.arr1.filter(function (m) {
        return m.id == that.moveId
      })
      //如果左边
      if (items.length < 2) return;
      this.arr1.splice(e.newDraggableIndex, 1)
    },
    //move回调方法
    onMove(e, originalEvent) {
      this.top = originalEvent.y
      this.left = originalEvent.x
      console.log(originalEvent)
      this.moveId = e.relatedContext.element.id;
      return true;
    },
  },
};
Array.prototype.filter = Array.prototype.filter || function (func) {
  var arr = this;
  var r = [];
  for (var i = 0; i < arr.length; i++) {
    if (func(arr[i], i, arr)) {
      r.push(arr[i]);
    }
  }
  return r;
}
</script>
<style scoped>
.itxst {
  margin: 10px;
  text-align: left;
}

.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
  position: relative;
}

.col+.col {
  margin-left: 10px;
}

.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
  text-align: left;
  width: 100px;
}

.item+.item {
  border-top: none;
  margin-top: 6px;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}

.item2 {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: pink;
  text-align: left;
  width: 100px;
  display: inline-block;
  /* position: absolute; */
}

.item2+.item2 {
  border-top: none;
  margin-top: 6px;
}

.item2:hover {
  outline: solid 1px #ddd;
  cursor: move;
}
</style>